<template>
  <div>
    <div class="bg">
      <div class="title">标签</div>
    </div>
    <el-row type="flex" justify="center">
      <el-col :md="16" :sm="24" class="main">
        <el-card>
          <router-link
            :to="'/tag?tag=' + item.id"
            v-for="(item, i) in tags"
            :key="i"
          >
            {{ item.name }}
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
    };
  },
  computed:mapState({
    tags: state => state.tags
  })
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.bg {
  @include bg("/image/tag.jpg");
  .title {
    font-size: 40px;
    font-weight: 900;
  }
}
.el-row {
  margin: 30px 5px 0;
}
.main {
  min-height: calc(50vh - 10vh - 20px - 30px );
  position: relative;
  .el-card {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    a{
      font-size: 16px;
      padding: 10px;
      transition:  0.5s;
      height: 100%;
      line-height: 20px;
      &:hover{
        font-size: 20px;
        color: #07c1f9;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .title {
    font-size: 5vw !important;
  }
}
@media screen and (min-width: 768px) {
  .el-card {
    padding: 20px;
  }
}
</style>